<script lang="ts">
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
// import HelloWorld from './components/HelloWorld.vue'
import { defineComponent } from "@vue/runtime-core";
import BaseHeader from "./layouts/BaseHeader.vue";
import BaseLefter from "./layouts/BaseLefter.vue";
// import EChart from "./components/EChart.vue";
// import BarChat from "./components/BarChat.vue";
// import Main from "./components/Main.vue";
export default defineComponent({
  name: "App",
  components: { BaseHeader, BaseLefter },
  mounted() {
    console.log(
      "%c  App mounted  ",
      "background:linear-gradient(114deg, rgba(133,114,134,1) 0%, rgba(77,70,77,1) 100%);font-size:20px;line-height: 20px;color:#fff;"
    );
  },
});
</script>

<template>
  <el-container>
    <div class="el-header">
      <base-header />
    </div>

    <!-- <router-link to="/">Go to BarChat</router-link>
    <router-view />
    <div>------------</div>-->
    <el-container>
      <el-aside class="el-aside" width="200px">
        <base-lefter />
      </el-aside>
      <el-main class="el-main">
        <div class="el-main-container">
          <router-view />
        </div>
      </el-main>
    </el-container>
    <el-footer>
      <!-- <base-footer /> -->
    </el-footer>
  </el-container>

  <!-- <img alt="Vue logo" src="./assets/logo.png" /> -->
  <!-- <e-chart/>
  <div>-------------------------------------------------------</div>
  <BarChat />-->
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /* margin-top: 60px; */
}
*::-webkit-scrollbar {
  width: 4px;
  height: 1px;
}
/*滚动条滑块*/
*::-webkit-scrollbar-thumb {
  /* border-radius: 10px; */
  /* -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */
  /* background: #535353; */
  background: rgba(204, 204, 204, 0.5)
}
/*滚动条轨道*/
*::-webkit-scrollbar-track {
  /* -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0); */
  /* border-radius: 10px; */
  background: rgba(204, 204, 204, 0);
}
.el-aside {
  position: fixed;
  width: 150px;
  height: calc(100vh - 70px);
}
.el-main {
  border-left: 1px solid #e6e6e6;
  margin-left: 150px;
  height: calc(100vh - 120px);
}
.el-main-container {
  height: calc(100vh - 160px);
}
.el-header {
  border-bottom: 1px solid #e6e6e6;
}
</style>
